<template>
	<view>
		<uni-nav-bar :title="type == 1 ? '品牌加盟' : '产业招商'" left-icon="back" @clickLeft="$tab.back()" :fixed="true"
			:statusBar="true" :border="false"></uni-nav-bar>



		<div class="py-32 px-20">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<div class="list">
					<view class="w-full relative round-20 hidden" v-for="i in list" :key="i.id"
						@click="$tab.nav(`/pages/index/franchise/index?id=${i.id}`)">
						<image :src="globalConfig.imagePrefix + i.icon" class="w-full" mode="widthFix">
						</image>
						<view class="shuzi-title text-32 font-500 p-16 bg-FFF">
							{{i.name}}
						</view>
					</view>
				</div>
			</s-pull-scroll>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				list: [],
				globalConfig: getApp().globalData.config
			};
		},
		onLoad(e) {
			this.type = e.type
			this.refresh()
		},
		methods: {
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}

					const res = await this.$Api.index.getRecruitList({
						pageNum: pullScroll.page,
						pageSize: 10,
						type: this.type
					})

					this.list = this.list.concat(res.rows);
					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	.list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20rpx;
		font-size: 0;
	}

</style>